<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<title>狮子会首页_优秀指导老师</title>
<link href="/Public/css/maint.css" type="text/css" rel="stylesheet" />
<link href="/Public/css/fontpic.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/Public/js/common.js"></script>
<script type="text/javascript" src="/Public/js/main.js"></script>
<script type="text/javascript" src="/Public/js/banner.js"></script>
<script type="text/javascript">
$(function() {
	/*瀑布流开始*/
	var container = $('#ulTeacher');
	var loading = $('#imloading');
	// 初始化loading状态
	loading.data("on", true);				

	var load = function(sqlJson) {
		if (sqlJson.size <= 0) {
			loading.text('只有这么多了！');
		} else {
			var html = "";
			for (var i in sqlJson.datas) {
				html +="<a href=''><li class='liteacher'>"+ "<span class='teacherNum'>"+( sqlJson.datas.pre * sqlJson.datas.limit + i  + 1) +"</span>";
				html +="<span class='teacherName'>"+sqlJson.datas[i].name+"</span>";
				html +="<span class='teacherPoll'><span class='spanPoll'>"+"得票总数："+sqlJson.datas[i].poll+"</span>";
				html +="<span class='spanPackge'>"+"件数总计："+sqlJson.datas[i].counts+"</span>" + "</span></li></a>";
			}
			/*模拟ajax请求数据时延时800毫秒*/
			var time = setTimeout(function() {
				var newElems = $(html).css({
					opacity: 0
				}).appendTo(container);
				newElems.imagesLoaded(function() {
					newElems.animate({
						opacity: 1
					}, 10);	
					container.masonry('appended', newElems, true);
					loading.data("on", true).fadeOut();
					clearTimeout(time);
				});
			}, 10)
		}
	};

	common.teacher.fetchRankJson( {}, load );

	$(window).scroll(function() { 
		if (!loading.data("on")) return;
		
		var itemNum = container.find('.liteacher').length;//20 0000
		var itemArr = [];
		itemArr[0] = $('#waterfull').find('.liteacher').eq(itemNum - 1).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
		itemArr[1] = $('#waterfull').find('.liteacher').eq(itemNum - 2).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
		itemArr[2] = $('#waterfull').find('.liteacher').eq(itemNum - 3).offset().top + $('#waterfull').find('.liteacher').eq(itemNum - 1)[0].offsetHeight;
		var maxTop = Math.max.apply(null, itemArr);
		if (maxTop < $(window).height() + $(document).scrollTop()) {
			//加载更多数据
			loading.data("on", false).fadeIn();
			common.teacher.fetchRankJson( {}, load );
		}
	});
});
</script>
</head>	
<body>
<!-------------header------------------------->
<include file="Tpl/header" />
<!-------------header END------------------------->
<!-------------main------------------------->
<div id="main" class="bot50">
 	<div class="activeTitles">
        <ul class="ulactTitle">
            <li><a href="/show/weixin" target="_self"><span>作品人气榜</span></a></li>
            <li class="on"><a href="/teacher/index" target="_self"><span class="bor0">人气指导老师</span></a></li>
        </ul>
    </div>
     <!-------------search------------------------->
    <div class="searchBox">
        <div class="search">
            <span class="fa fa-fw fa-search"></span>
            <input class="txt"  placeholder="输入参赛编号或者作者姓名进行搜索"/>
        </div>
    </div>
    <!-------------search  END------------------------->
    <div class="teacherBox" id="waterfull">
        <ul class="ulTeacher" id="ulTeacher">
        </ul>
    </div>
   <div id="imloading" class="loading">加载中</div>
</div>
<include file="Tpl/footer" />
<!-------------main END------------------------->
</body>
</html>
